<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			body {
				line-height: initial;
			}
			
			.mui-bar-nav {
				background: #f16456;
				height: 58px;
			}
			
			.mui-bar .mui-title {
				margin-top: 18px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 58px;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF!important;
				margin-top: 17px;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.mui-table-view-cell {
				margin: 0 auto;
				font-size: 14px;
				color: #666;
			}
			
			.mui-btn {
				border: 1px solid #f16456;
				width: 300px;
				background-color: #f16456;
			}
			
			.mui-btn:active {
				border: 1px solid #de7c79!important;
				background-color: #de7c79!important;
			}
			
			.right-text {
				float: right;
				margin-right: 20px;
				color: darkgray;
			}
			
			.iconfont {
				font-size: 14px;
				color: #f16456;
			}
			
			.pt3 {
				padding-top: 3px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">设置</h1>
		</header>
		<div class="mui-content">
			<div class="mui-scroll">
				<ul class="mui-table-view" style="margin-top: 5px;">
					<li class="mui-table-view-cell">
						<a id="head"><span class="iconfont icon-xiangji"></span>头像
							<span class="mui-pull-right head">
									<img class="head-img mui-action-preview" id="head-img1" :src="member"/>
							</span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a><span class="iconfont icon-wo"></span>昵称<span id="nickname" class="right-text"></span></a>
					</li>
					<li class="mui-table-view-cell">
						<a><span class="iconfont icon-mobile"></span>手机号<span id="mobile" class="right-text"></span></a>
					</li>

				</ul>

				<ul class="mui-table-view" style="margin-top: 5px;">
					<li class="mui-table-view-cell" onclick="openHtml('alipay','alipay-modify.html');">
						<a class="mui-navigate-right"><span class="iconfont icon-zhifubao"></span>支付宝<span id="alipay" class="right-text">去绑定</span></a>
					</li>

					<li class="mui-table-view-cell" onclick="openHtml('weixin','wechat-modify.html');">
						<a class="mui-navigate-right"><span class="iconfont icon-wechat"></span>微信<span id="wechat" class="right-text">去绑定</span></a>
					</li>
					<li class="mui-table-view-cell" onclick="openHtml('bank','bank-modify.html');">
						<a class="mui-navigate-right"><span class="iconfont icon-yinhangqia"></span>银行卡<span id="bank_card_number" class="right-text">去绑定</span></a>
					</li>
					<li class="mui-table-view-cell">
						<a><span class="iconfont icon-banbenshengji"></span>版本号<span id="version" class="right-text"></span></a>
					</li>
				</ul>

				<div class="mui-button-row" style="margin-bottom: 20px;margin-top: 10px;" onclick="exitLogin();">
					<button type="button" class="mui-btn mui-btn-primary" onclick="return false;">退出登陆</button>&nbsp;&nbsp;
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js "></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript">
			mui.init();

			var member = null;
			mui.plusReady(function() {
				swipeBack();
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					document.getElementById("version").innerText = "v" + inf.version;
				});
				member = JSON.parse(plus.storage.getItem("member"));
				document.getElementById("head-img1").src = member.headImg;
				document.getElementById("mobile").innerText = member.mobile;
				document.getElementById("nickname").innerText = member.nickname;
				mui.fire(plus.webview.getWebviewById('setting'), 'setUserState', {});
			});

			//添加setUserState自定义事件
			window.addEventListener("setUserState", function(event) {
				member = JSON.parse(plus.storage.getItem("member"));
				var alipay = member.alipay;
				var wechat = member.wechat;
				var bank_card_number = member.bankCardNumber;

				if(!alipay) {
					$("#alipay").text("去绑定 ");
				} else {
					$("#alipay").text(alipay);
					$("#alipay").addClass("pt3");
					$(".mui-table-view:last li:eq(0) a").removeClass("mui-navigate-right");
					$(".mui-table-view:last .mui-table-view-cell:eq(0)").removeAttr("onclick");
				}

				if(!wechat) {
					$("#wechat").text("去绑定 ");
				} else {
					$("#wechat").text(wechat);
					$("#wechat").addClass("pt3");
					$(".mui-table-view:last li:eq(1) a").removeClass("mui-navigate-right");
					$(".mui-table-view:last .mui-table-view-cell:eq(1)").removeAttr("onclick");
				}

				if(!bank_card_number) {
					$("#bank_card_number").text("去绑定 ");
				} else {
					$("#bank_card_number").text(bank_card_number);
					$("#bank_card_number").addClass("pt3");
					$(".mui-table-view:last li:eq(2) a").removeClass("mui-navigate-right");
					$(".mui-table-view:last .mui-table-view-cell:eq(2)").removeAttr("onclick");
				}
			});

			function openHtml(mid, murl) {
				mui.openWindow({
					id: mid,
					url: murl,
					waiting: {
						autoShow: false
					}
				});
			}

			//退出登陆
			function exitLogin() {
				plus.storage.setItem("tooken", "");
				var index = plus.webview.getLaunchWebview();
				index.show();
				var wvs = plus.webview.all();
				for(var i = 0; i < wvs.length; i++) {
					if(wvs[i].id == index.id) {
						continue;
					}
					wvs[i].hide();
					wvs[i].close();
				}
			}
		</script>
	</body>

</html>